<template>
    <div>

        <!--高级检索--><!--统计数量-->
        <el-row>
            <el-col :span="24">
                <!--头部-->
                <div style="background-color: #F3F3F3;padding: 10px 0px;">
                    <span style="margin-right: 1284px;border-left: #1ABC9C 8px solid; padding: 5px;">商品订单列表</span>
                    <el-button @click="$router.go(0);">刷新</el-button>
                    <el-button @click="$router.go(-1);">返回</el-button>
                </div>
                <div style="margin: 20px 0 0px 30px;">
                    <el-button @click="c1(null)" type="" plain style="width: 150px;">全部订单(<span>{{tongji.qb}}</span>)</el-button>
                    <el-button @click="c1(2)" type="success" plain style="width: 150px;">待付款(<span>{{tongji.dfk}}</span>) </el-button>
                    <el-button @click="c1(4)" type="success" plain style="width: 150px;">待发货(<span>{{tongji.dfh}}</span>)</el-button>
                    <el-button @click="c1(5)" type="success" plain style="width: 150px;">已发货(<span>{{tongji.yfh}}</span>)</el-button>
                    <el-button @click="c1(6)" type="success" plain style="width: 150px;">已完成(<span>{{tongji.yqs}}</span>)</el-button>
                    <el-button @click="c1(10)" type="success" plain style="width: 150px;">已取消(<span>{{tongji.yqx}}</span>)</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span><i class="el-icon-search"></i>筛选查询</span>
                        <el-button @click="mohu" style="float: right;">查看</el-button>
                    </div>
                    <div>
                        <el-form :inline="true" ref="form" :model="form" label-width="80px">
                            <el-form-item label="订单状态">
                                <el-select v-model="form.orderStatus" placeholder="全部订单">
                                    <el-option :key="null" :label="'全部订单'" :value="null"></el-option>
                                    <el-option :key="2" :label="'待付款'" :value="2"></el-option>
                                    <el-option :key="4" :label="'代发货'" :value="4"></el-option>
                                    <el-option :key="5" :label="'已发货'" :value="5"></el-option>
                                    <el-option :key="6" :label="'已完成'" :value="6"></el-option>
                                    <el-option :key="10" :label="'已取消'" :value="10"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="订单编号">
                                <el-input v-model="form.orderNo" placeholder="订单编号"></el-input>
                            </el-form-item >
                            <el-form-item label="用户账号">
                                <el-input v-model="form.userNumber" placeholder="用户账号"></el-input>
                            </el-form-item>
                            <el-form-item label="支付方式">
                                <el-input v-model="form.orderPaymentChannel"></el-input>
                            </el-form-item>
                            <el-form-item label="提交时间">
                                <el-date-picker
                                        type="date"
                                        v-model="form.createDate"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd"
                                ></el-date-picker>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!--订单表格-->
        <el-row style="margin-top: 20px">
            <el-col :span="24">
                <div style="background-color: #F3F3F3;padding: 10px 0px;">
                    <span style="margin-right: 1284px;"><i class="el-icon-s-grid" style="vertical-align: middle;  font-size: 30px;color: #666666"></i>商品订单列表</span>
                </div>
                <!--表格-->
                <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column v-if="false" fixed prop="orderId" label="订单ID" width="300"></el-table-column>
                    <el-table-column fixed prop="shopId" label="订单编号" width="300"></el-table-column>
                    <el-table-column prop="createDate" label="提交时间" width="300"></el-table-column>
                    <el-table-column prop="userNumber" label="用户编号" width="200"></el-table-column>
                    <el-table-column prop="logisticsFee" label="订单金额" width="120"></el-table-column>
                    <el-table-column prop="orderPaymentChannel" label="支付方式1" width="120">
                        <template slot-scope="scope">
                            <!-- scope.row 包含表格里当前行的所有数据 -->
                            <span :class="scope.row.orderPaymentChannel?'act':'inact'">
                                {{scope.row.orderPaymentChannel==2?'微信':'支付宝'}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderSource" label="订单来源1" width="120">
                        <template slot-scope="scope">
                            <!-- scope.row 包含表格里当前行的所有数据 -->
                            <span :class="scope.row.orderSource?'act':'inact'">{{scope.row.orderSource==2?'小程序':'App'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderStatus" label="订单状态1" width="120">
                        <template slot-scope="scope">
                            <!-- scope.row 包含表格里当前行的所有数据 -->
                            <span :class="scope.row.orderStatus?'act':'inact'">
                                {{scope.row.orderStatus | orderStatusg}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderType" label="类型1" width="100">
                        <template slot-scope="scope">
                            <!-- scope.row 包含表格里当前行的所有数据 -->
                            <span style="color: #66B1FF;" :class="scope.row.orderType?'act':'inact'">
                                {{scope.row.orderType==2?'视频':'商品'}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button @click="chakandingdan(scope)" type="text" size="small" >查看订单</el-button>
                            <el-button v-if='scope.row.orderStatus!=2 && scope.row.orderStatus!=3' @click="chakandingdan1(scope)" type="text" size="small">订单跟踪</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <div class="block" style="margin-top:15px;">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[1,5,10,20]"
                                   :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableData.length">
                    </el-pagination>
                </div>
            </el-col>

        </el-row>
        <!--订单详情弹框-->
        <el-dialog title="订单详情" :visible.sync="dialogTableVisible">
            <el-card class="box-card">
                <div v-if="dialogTableVisible">
                    <div slot="header" class="clearfix">
                        <span style="color: red;"><i class="el-icon-warning"></i>当前订单状态:{{tableData[index].orderStatus | orderStatusg}}</span>
                        <el-button style="float: right; padding: 3px 0" type="text">刷新</el-button>
                    </div>
                    <div>
                        <p><i class="el-icon-s-flag"></i>基本信息</p>
                        <table border="1px" cellspacing="0" cellpadding="0" style="border-color: #E4E4E4">
                            <tr height="50px" style="background-color: #F9FAFC;">
                                <th width="150px">订单编号</th>
                                <th width="150px">发货单流水号</th>
                                <th width="150px">用户账号</th>
                                <th width="150px">支付方式</th>
                                <th width="150px">订单来源</th>
                                <th width="150px">订单类型</th>
                            </tr>
                            <tr height="50px" align="center">
                                <td>{{tableData[index].shopId}}</td>
                                <td>{{tableData[index].orderLogisticsNumber}}</td>
                                <td>{{tableData[index].userNumber}}</td>
                                <td>{{tableData[index].orderPaymentChannel | orderStatusg}}</td>
                                <td><!--{{tableData[index].orderSource}}-->app</td>
                                <td><!--{{tableData[index].orderType}}-->商品</td>
                            </tr>
                            <tr height="50px">
                                <th>配送方式</th>
                                <th>物流单号</th>
                                <th>自动确认收货时间</th>
                                <th>活动信息</th>
                                <th></th>
                                <th></th>
                            </tr>
                            <tr height="50px" align="center">
                                <td>快递</td>
                                <td>{{tableData[index].orderLogisticsNumber}}</td>
                                <td>7天</td>
                                <td>无优惠</td>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                        <p><i class="el-icon-s-flag"></i>收货人消息</p>
                        <table border="1px" cellspacing="0" cellpadding="0" style="border-color: #E4E4E4">
                            <tr height="50px" style="background-color: #F9FAFC;">
                                <th width="227px">收货人</th>
                                <th width="227px">手机号码</th>
                                <th width="227px">邮政编码</th>
                                <th width="227px">收货地址</th>
                            </tr>
                            <tr height="50px" align="center">
                                <td><!--{{tableData[index].shopId}}-->张无忌</td>
                                <td>{{tableData[index].orderLogisticsNumber}}</td>
                                <td>{{tableData[index].userNumber}}</td>
                                <td><!--{{tableData[index].orderPaymentChannel}}-->金云市</td>
                            </tr>
                        </table>
                        <p><i class="el-icon-s-flag"></i>商品信息</p>
                        <table border="1px" cellspacing="0" cellpadding="0" style="border-color: #E4E4E4">
                            <tr height="50px" style="background-color: #F9FAFC;">
                                <th width="129px">商品图片</th>
                                <th width="129px">商品名称</th>
                                <th width="129px">价格/编号</th>
                                <th width="129px">编号</th>
                                <th width="129px">数量</th>
                                <th width="129px">类型</th>
                                <th width="129px">小计</th>
                            </tr>
                            <tr height="50px" align="center">
                                <td><img width="100px" :src="`http://localhost:8081${product.mainImage}`"></img></td>
                                <td>{{product.productName}}</td>
                                <td>{{product.currentpriceProduct}}</td>
                                <td>{{product.productCode}}</td>
                                <td>1</td>
                                <td><!--{{tableData[index].orderType}}-->商品</td>
                                <td>￥{{tableData[index].logisticsFee}}</td>
                            </tr>
                        </table>
                    </div>
                </div>

            </el-card>
        </el-dialog>
        <!--订单跟踪-->
        <el-dialog title="订单跟踪" :visible.sync="dialogTableVisible1" >
            <div class="block">
                <el-timeline>
                    <el-timeline-item
                            v-for="(activity, index) in activities"
                            :key="index"
                            :icon="activity.icon"
                            :type="activity.type"
                            :color="activity.color"
                            :size="activity.size"
                            :timestamp="activity.timestamp">
                        {{activity.content}}
                    </el-timeline-item>
                </el-timeline>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "orderFromList",
        methods: {
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            //模糊查提交方法
            mohu() {
                //this.from.createDate = this.from.createDate.getTime();
                this.$http.get("/userorder/getAll",{
                    params:this.form
                })
                    .then(e => {
                        console.log(e.data)
                        this.tableData = e.data;
                        if(this.tableData.length != 0){
                            this.tabledatas = false;
                        }
                    });
            },
            //查看订单详情
            chakandingdan(e) {
                this.dialogTableVisible = true;
                this.index = e.$index;
                //查看订单对应商品信息
                this.$http.get("/userorder/getBysp", {
                    params: {
                        id: 1,
                    }
                }).then(e => {
                    this.product = e.data;
                })
            },
            //弹出订单追踪
            chakandingdan1(e) {
                this.dialogTableVisible1 = true;
                this.index = e.$index;
            },
            c1(vla){
                this.$http.get("/userorder/getAll", {
                    params: {
                        orderStatus: vla,
                        orderType:3
                    }
                }).then(e => {
                    this.tableData = e.data;
                })
            },
            dingdanzhuangtailiebiao(){
                for(var i =0;i<this.tableData.length;i++){
                    if(this.tableData[i].orderStatus == 2){
                        this.tongji.dfk += 1;
                    }else if(this.tableData[i].orderStatus == 4){
                        this.tongji.dfh += 1;
                    }else if(this.tableData[i].orderStatus == 5){
                        this.tongji.yfh += 1;
                    }else if(this.tableData[i].orderStatus == 6){
                        this.tongji.yqs += 1;
                    }else if(this.tableData[i].orderStatus == 10){
                        this.tongji.yqx += 1;
                    }
                }
            }
        },
        filters:{
            orderStatusg(e){
                if(e==2){return "待付款";
                }else if(e==3){return "已付款"}
                else if(e==4){return "待发货"}
                else if(e==5){return "已发货"}
                else if(e==6){return "已签收"}
                else if(e==7){return "退货申请"}
                else if(e==8){return "退货中"}
                else if(e==9){return "已退货"}
                else if(e==10){return "取消交易"}
                return ""
            },
        },
        data() {
            return {
                product:{},                   //存放订单id对应的商品
                dialogTableVisible: false,    //打开详情弹窗
                dialogTableVisible1: false,   //打开订单跟踪弹窗
                index:0,          //存放索引用来打开弹窗之后的信息
                orderPaymentChannel: '',//支付方式
                createDate: '',         //下单时间
                orderNo: '',            //订单编号
                userNumber: '',         //用户查询编号
                tableData: [
                    //{orderStatus:2}
                ],
                tabledatas:true,
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5, // 每页的数据条数
                //高级检索提交时input中的数据
                form: {
                    orderNo:"",
                    userNumber:"",
                    orderPaymentChannel:"",
                    orderNo:"",
                    createDate:"",
                    orderType:3,
                    orderStatus: null ,
                },
                activities: [
                {
                    content: '订单已签收，期待再次服务',
                    timestamp: '2022-04-12 20:46',
                    size: 'large',
                    type: 'primary',
                    color: '#0bbd87'
                }, {
                    content: '到达目的地廊坊广阳区',
                    timestamp: '2018-04-03 20:46',
                }, {
                    content: '在广东深圳公司发出扫描',
                    timestamp: '2018-04-03 20:46',
                    size: 'large'
                }, {
                    content: '在分拨中心广东深圳公司进行卸车扫描',
                    timestamp: '2018-04-03 20:46'
                },{
                    content: '在北京进行下级地点扫描',
                    timestamp: '2018-04-03 20:46'
                },{
                    content: '订单付款成功',
                    timestamp: '2018-04-03 20:46'
                }],
                tongji:{
                    qb:0,dfk:0,dfh:0,yfh:0,yqs:0,yqx:0,
                }
            };
        },
        //初始化数据表格
        created(){
            //查询商品订单信息
            this.$http.get("/userorder/getAll",{
                params:{
                    orderType:3
                }
            }).then(e => {
                    this.tableData = e.data;
                    this.tongji.qb = this.tableData.length
                    this.dingdanzhuangtailiebiao();
                })
        },
    }
</script>

<style scoped>

</style>